<template>
  <view class="container">
    <NavBar title="签到"></NavBar>
    <Calendar @clickChange="signIn" :dataSource="dataSource"></Calendar>
    <view class="signInfo">
      <text class="onSign" v-if="isSign">已签到</text>
      <text class="offSign" v-else>未签到</text>
      <view class="info">
        本月您已连续签到：
        <text class="num">{{userInfo.count?userInfo.count:0 }}</text>
        {{'&nbsp'}}天
      </view>
      <view class="info">
        当前积分：
        <text class="num">{{userInfo.fav}}</text>
      </view>
      <view class="info" v-if="isSign">
        本次签到获得：
        <text class="num">{{userInfo.signFav+'&nbsp'}}</text>积分
      </view>
      <view class="info">
        点击查看
        <text class="rule" @click="openRule">《签到规则》</text>
      </view>
      <Rules :showRule="showRule" @closeRule="closeRule"></Rules>
    </view>
  </view>
</template>

<script>
import moment from 'dayjs'
import Rules from './components/Rules/Rules'
import { mapState } from 'vuex'
export default {
  components: {
    Rules
  },
  data () {
    return {
      isSign: false,
      showRule: false,
      dataSource: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.auth.userInfo,
      token: state => state.auth.token
    })
  },
  watch: {
    token () {
      this.getAllSign()
    }
  },
  onShow () {
    this.getAllSign()
    this.showSign()
  },
  methods: {
    getAllSign () {
      this.$axios.api.getAllSign()
        .then(res => {
          if (res.code === 200) {
            this.dataSource = res.data
          }
        })
    },
    async signIn () {
      const res = await this.$axios.api.signIn()
      if (res.code === 200) {
        uni.showToast({
          title: '签到成功',
          icon: 'success',
          duration: 2000
        })
        this.getAllSign()
        this.$store.commit('setUserInfo', {
          ...this.userInfo, ...{
            fav: res.fav,
            signFav: res.signFav,
            count: res.count,
            lastSignIn: res.lastSignIn
          }
        })
        this.isSign = true
      } else {
        uni.showToast({
          title: '签到异常',
          icon: 'error',
          duration: 2000
        })
      }
    },
    showSign () {
      const nowDate = moment().format('YYYY-MM-DD')
      const lastSignIn = this.userInfo.lastSignIn
      if (lastSignIn === nowDate) {
        this.isSign = true
      } else {
        this.isSign = false
        if (moment(lastSignIn).format('YYYY-MM-DD') !== moment().subtract(1, 'days').format('YYYY-MM-DD')) {
          this.userInfo.count = 0
        }
      }
    },
    openRule () {
      this.showRule = true
    },
    closeRule (data) {
      this.showRule = data
    }
  }
}
</script>

<style lang="scss" scoped>
.signInfo {
  width: 750rpx;
  height: 550rpx;
  background: url('@/static/images/signInfoBg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: -30rpx;
  padding: 120rpx 60rpx 40rpx 60rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .onSign,
  .offSign {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    text-align: center;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
  }
  .onSign {
    border: 1rpx solid #0cae9e;
    color: #0cae9e;
  }
  .offSign {
    border: 1rpx solid rgb(240, 83, 11);
    color: rgb(240, 83, 11);
  }
  .info {
    font-size: 26rpx;
    margin-bottom: 30rpx;
    color: #15685e;
  }
  .num {
    color: rgb(240, 83, 11);
    font-size: 32rpx;
  }
  .rule {
    color: #0cae9e;
  }
}
</style>
